<template>
  <div class="launch z-999 on-top w-full h-full" :class="{ 'launch-pc': equ === 'pc' }"
    :style="guidance.url ? `background-image: url(${guidance.url});` : ''">
    <PureBtn v-if="equ === 'pc'" :loading="ttsa.apiLoading" @click="start">
      {{ guidance.text || '开启元宇宙之旅' }}
    </PureBtn>
    <div v-else class="launch-btn-bg absolute bottom-[53px] left-[16.5px] w-[342px] h-[82px] flc">

      <RoundedBtn :loading="ttsa.apiLoading" @click="start">
        {{ guidance.text || '开启元宇宙之旅' }}
      </RoundedBtn>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="LaunchPage"
>
import { useConfigStore } from '@/store/config'
import { useTtsaStore } from '@/store/ttsa'
import { useTreeStore } from '@/store/tree'
import { equ } from '../../../../package-env'

const config = useConfigStore()
const ttsa = useTtsaStore()
const tree = useTreeStore()

const guidance = config.guidance

const start = () => {
  tree.getMenuCatalogue()
  // start
  ttsa.start()
}

</script>

<style scoped lang="scss">
.launch {
  background: no-repeat center center / cover;
  // background: url(@/assets/images/page-bg.png) no-repeat center center / cover;
}

.launch-btn-bg {
  // background: url(@/assets/images/launch-bg.svg) no-repeat center center / 100% 100%;
}
</style>

